<template>
    <div>
        <el-table border
                  :data="tableData" stripe
                  style="width: 100%;height: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                <template slot-scope="{row, $index}">
                    <span>{{(curPage - 1) * 10 + $index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="taskName" label="任务名称" :min-width="100">
                <template slot-scope="{row, $index}">
                    <div @click.stop="changeName($index,'taskName')">
                        <el-input
                                v-if="editTaskName[$index]"
                                v-model="row.taskName"
                                size="mini"
                                class="taskName"
                                @blur="endEdit"
                                @keyup.enter.native="endEdit($event)"
                        ></el-input>
                        <span v-else>{{row.taskName}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="任务描述" :min-width="100">
                <template slot-scope="{row, $index}">
                    <div @click.stop="changeRemark($index,'remark')">
                        <el-input
                                v-if="editRemark"
                                v-model="row.remark"
                                size="mini"
                                class="remark"
                                @blur="endEdit"
                                @keyup.enter.native="endEdit($event)"
                        ></el-input>
                        <span v-else>{{row.remark}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="userId" label="领取人" :min-width="90">
                <template slot-scope="{row, $index}" v-if="row.users">
                    <span>{{row.users.userName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="time" label="发布时间" :min-width="200" sortable>
                <template slot-scope="{row, $index}">
                    <span>{{row.time}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="查看调查点" :min-width="120">
                <template slot-scope="{row, $index}">
                    <el-button class="el-button el-button--mini el-button--success"
                               @click="to(path,row.id)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="发电厂房检查" :min-width="120">
                <template slot-scope="{row, $index}">
                    <el-button class="el-button el-button--mini el-button--success"
                               @click="to('ElectricityHourseQc',row.id)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="变电站检查" :min-width="120">
                <template slot-scope="{row, $index}">
                    <el-button class="el-button el-button--mini el-button--success"
                               @click="to('ElectricityStationQc',row.id)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="state" label="任务状态" :min-width="100">
                <template slot-scope="{row, $index}" v-if="row.state">
                    <span>{{state[row.state - 1]}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="操作" :min-width="80">
                <template slot-scope="{row, $index}" v-if="row.state">
                    <el-button class="el-button el-button--mini el-button--success"
                               @click="to(historyPath,row.id)" v-if="row.state === 7">
                        查看
                    </el-button>
                    <el-button class="el-button el-button--mini el-button--danger"
                               @click="opDialog(row.id)" v-else>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <msg-dialog @yes="deleteTask" @no="onCancel" :dialog-visible="dialogVisible"
                    :msg="msg"></msg-dialog>
    </div>
</template>
<script>
    import qs from 'qs';
    import MsgDialog from "../../menu/MsgDialog";

    export default {
        name: "TaskTable",
        components: {
            MsgDialog
        },
        data() {
            return {
                msg: '确定删除此任务',
                editTaskName: false,
                editRemark: false,
                state: ["新发布", "已认领", "数据有上传", "等待质检", "质检不合格", "质检合格", "数据入库"],
                multipleSelection: [],
                dialogVisible: false,
                chooseId: ''
            }
        },
        props: {
            tableData: {
                type: Array,
                defult: []
            },
            path: {
                type: String,
                defult: ''
            },
            historyPath: {
                type: String,
                defult: ''
            },
            curPage: {
                type: Number,
                defult: 1
            }
        },
        methods: {
            download(url) {
                window.open(url);
            },
            opDialog(id) {
                this.dialogVisible = true;
                this.chooseId = id;
            },
            deleteTask() {
                axios.post("/bjdzms/releaseTask/del",
                    qs.stringify({
                        'id': this.chooseId
                    })).then(data => {
                    this.total = data.data;
                    this.dialogVisible = false;
                    this.$emit('updateData');
                });
            },
            endEdit(event) {
                this.editTaskName = false;
                this.editRemark = false;
            },
            enterBlur(event) {
                event.target.blur()
            },

            changeName(index, className) {
                //设置是否可以编辑
                // tableData为表格数据
                this.editTaskName = new Array(this.tableData.length);
                this.editTaskName[index] = true;
                this.$set(this.editTaskName, index, true);
                //让input自动获取焦点
                this.$nextTick(function () {
                    let editInputList = document.getElementsByClassName(className);
                    editInputList[0].children[index].focus();
                });
            },
            changeRemark(index, className) {
                this.editRemark = new Array(this.tableData.length);
                this.editRemark[index] = true;
                // this.saveItem = this.tableData[index];
                this.$set(this.editRemark, index, true);
                this.$nextTick(function () {
                    let editInputList = document.getElementsByClassName(className);
                    editInputList[0].children[index].focus();
                });
            },
            to(path, id) {
                this.$router.push({name: path, params: {id: id}});
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.taskTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.taskTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            formatter(row, column) {
                return row.address;
            },
            onCancel() {
                this.dialogVisible = false;
                this.chooseId = '';
            }
        },
    }
</script>

<style scoped>

</style>
